<template>
  <el-popover placement="bottom" trigger="hover" popper-class="tag-user-panel" width="300">
    <p>
      <el-row>
        <el-col :span="8">所属公司:</el-col>
        <el-col :span="16">{{ user.compNm }}</el-col>
      </el-row>
    </p>
    <p>
      <el-row>
        <el-col :span="8">所属部门:</el-col>
        <el-col :span="16">{{ user.deptNm }}</el-col>
      </el-row>
    </p>
    <p>
      <el-row>
        <el-col :span="8">工号:</el-col>
        <el-col :span="16">{{ user.empId }}</el-col>
      </el-row>
    </p>
    <p>
      <el-row>
        <el-col :span="8">职位:</el-col>
        <el-col :span="16">{{ user.userPost }}</el-col>
      </el-row>
    </p>
    <p>
      <el-row>
        <el-col :span="8">联系电话:</el-col>
        <el-col :span="16">{{ user.userMobile }}</el-col>
      </el-row>
    </p>
    <p>
      <el-row>
        <el-col :span="8">邮箱地址:</el-col>
        <el-col :span="16">{{ user.userEmail }}</el-col>
      </el-row>
    </p>
    <el-button slot="reference" type="text" class="tag-table user-panel">
      <template v-if="index >= 0">
        <icon-svg
          name="iconDiamond"
          v-if="index <= 2"
          class="user-panel-icon"
          :class="index === 0 ? 'first' : index === 1 ? 'second' : 'third'"
        ></icon-svg>
        <icon-svg name="iconUserName" v-else></icon-svg>
      </template>
      <span class="click-item">{{ $name(user, rowkey.nname, rowkey.name) }}</span>
    </el-button>
  </el-popover>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true,
      default: () => {}
    },
    rowkey: {
      type: Object,
      default: () => {
        return { key: 'userId', name: 'loginUname', nname: 'nname' }
      }
    },
    index: {
      type: Number
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss">
.user-panel {
  font-size: 16px;
  padding: 0;
  svg {
    vertical-align: middle;
    margin-right: 10px;
    &.first {
      color: #e26c60;
    }
    &.second {
      color: #f2bb54;
    }
    &.third {
      color: #90bde4;
    }
  }
}
.tag-user-panel p {
  padding: 10px 0;
}
</style>
